<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>无奈说点什么</title>
    <link rel="stylesheet" href="/layui-v2.9.6/layui/css/layui.css">
    <style>
        .demo-tab-header .layui-btn.layui-this{border-color: #1E9FFF; color: #1E9FFF;}
        .demo-tab-body>div{display: none;}
    </style>
</head>
<body>
<!--<div style="padding-top:10px;">-->

<!--</div>-->

<div class="layui-container" style="padding-top:0px;">
    <ul class="layui-nav layui-bg-green" style="text-align: center">
        <li class="layui-nav-item" style="line-height:40px;">无奈说点什么</li>
    </ul>
    <div style="padding-top:10px;"></div>
    <form class="layui-form layui-form-pane" action="">
        <input type="hidden" id="fileIds" name="fileIds" value=""/>

        <div class="layui-form-item">
            <label class="layui-form-label" style="width:75px;">对谁说</label>
            <div class="layui-input-block" style="margin-left:75px;">
                <input type="text" name="title" autocomplete="off" placeholder="**公司/**企业" lay-verify="required" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">说点什么</label>
            <div class="layui-input-block">
                <textarea name="contents" placeholder="怎么就这么**呢！！！！！！" lay-verify="required" class="layui-textarea"></textarea>
            </div>
        </div>
<!--        <div class="layui-form" style="padding-top:5px;">-->
<!--            <input type="checkbox" name="sayType[0]" title="糗事" value="1" checked>-->
<!--            <input type="checkbox" name="sayType[1]" title="趣事" value="2" checked>-->
<!--        </div>-->
        <div class="layui-upload" style="padding-top:10px;">
            <button type="button" class="layui-btn" id="ID-upload-demo-btn-2">
                <i class="layui-icon layui-icon-upload"></i>图文上传
            </button>
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
                预览图：
                <div class="layui-upload-list" id="upload-demo-preview"></div>
            </blockquote>
        </div>
        <div class="layui-form-item">
            <button lay-filter="click_publish" lay-submit type="submit" class="layui-btn layui-btn-fluid layui-bg-blue" style="font-size:20px;">匿名发布</button>
        </div>
    </form>
</div>


<!-- body 末尾处引入 layui -->
<script src="/layui-v2.9.6/layui/layui.js"></script>
<script>
    layui.use(function() {
        var $ = layui.$;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;
        var util = layui.util;
        var element = layui.element;
        var upload = layui.upload;
        // var elem = $('#example-anim-element');
        // var animName = 'layui-anim-down'; // 动画类名
        // // 通过事件简单演示动画过程
        // $('#example-anim-usage').on('click', function(){
        //     elem.removeClass(animName);
        //     setTimeout(function(){
        //         elem.addClass(animName); // 给目标元素追加「往下滑入」的动画
        //     });
        // });

        // 提交事件
        form.on('submit(click_publish)', function(data){
            var field = data.field; // 获取表单字段值
            console.log(data)
            // 显示填写结果，仅作演示用
            layer.alert(JSON.stringify(field), {
                title: '当前填写的字段值'
            });
            // 此处可执行 Ajax 等操作
            $.ajax({
                url:"/home/api/says",
                type:"POST",
                data: data.field,
                success:function (){
                    layer.msg("提交成功!2s后关闭弹窗");
                    var index=parent.layer.getFrameIndex(window.name);
                    setTimeout(function(){
                        parent.layer.close(index);
                    }, 2000); // 2000 毫秒即 2 秒钟后自动关闭弹框

                },error:function (){
                    layer.msg("提交失败!");
                }
            });
            return false; // 阻止默认 form 跳转
        });

        // 多图片上传
        upload.render({
            elem: '#ID-upload-demo-btn-2',
            url: '/home/upload/image', // 实际使用时改成您自己的上传接口即可。
            multiple: true,
            before: function(obj){
                // 预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#upload-demo-preview').append('<img src="'+ result +'" alt="'+ file.name +'" style="width: 90px; height: 90px;padding:5px;">')
                });
            },
            done: function(res){
                var fileIds = $("#fileIds").val();
                if(fileIds!=""){
                    $("#fileIds").val(fileIds+","+res.data.id);
                }else{
                    $("#fileIds").val(res.data.id);
                }
                console.log(res)
                // 上传完毕
                // …
            }
        });
    });
</script>
</body>
</html>
